<template>
	<div class="project_list">
	  <el-form :inline="true" :model="projectSearch" label-width="70px" style="min-width: 1200px;" class='searchForm'>
		<el-form-item label="项目名称">
			<el-input v-model="projectSearch.name" placeholder="请输入" clearable/>
		</el-form-item>
		<el-form-item label="项目描述">
			<el-input v-model="projectSearch.desc" placeholder="请输入" clearable/>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="reset">重置</el-button>
			<el-button type="primary" @click="search">搜索</el-button>
		</el-form-item>
	  </el-form>
	  <el-dialog v-model="editDialogVisible" :title="title" style="width: 400px;" class='dialog'>
		  <el-form :model="projectSave" label-position='right' label-width="70px">
			<el-form-item label="项目名称">
				<el-input v-model="projectSave.name" autocomplete="off" placeholder="请输入"/>
			</el-form-item>
			<el-form-item label="项目描述">
				<el-input v-model="projectSave.desc" autocomplete="off" placeholder="请输入" type="textarea"/>
			</el-form-item>
			<el-form-item label="消息地址">
				<el-input v-model="projectSave.url" autocomplete="off" placeholder="请输入" />
			</el-form-item>
			<el-form-item label="项目成员" >
				<el-select
					v-model="projectSave.user"
					multiple
					placeholder="请选择"
					filterable
					clearable
					  >
					<el-option v-for="obj in user_list" :label='obj.username' :value="obj.id" />
				</el-select>
			</el-form-item>
			<el-form-item label="创建人" >
				<el-select v-if='isAdd' v-model="projectSave.create_by" disabled>
					<el-option  :label='user_name' :value="user_id" />
				</el-select>
				<el-select v-else
					v-model="projectSave.create_by"
					placeholder="请选择"
					filterable
					clearable
					  >
						<el-option v-for="obj in projectSave.user_names" :label='obj.username' :value="obj.id" />
				</el-select>
			</el-form-item>
		  </el-form>
		  <template #footer>
			<span class="dialog-footer">
			  <el-button @click="editDialogVisible = false">取消</el-button>
			  <el-button type="primary" @click="save">
				确认
			  </el-button>
			</span>
		  </template>
	  </el-dialog>
	  <el-table :data="project_list.results" class='table'>
		<el-table-column label="序号" width="70" type="index"/>
		<el-table-column label="项目名称" min-width="150">
			<template #default="scope">
				<span style="margin-right: 10px;">{{ scope.row.name }}  </span>
			    <el-tag v-if="scope.row.create_by === user_id"  effect="dark" round size="small">  我的</el-tag>
				<el-tag v-else-if="scope.row.user.includes(user_id)"  effect="dark" round size="small" type="success">  已加入</el-tag>
				<el-tag v-else  effect="dark" round size="small" type="info">  未加入</el-tag>
			</template>
		</el-table-column>
		<el-table-column label="项目描述" prop="desc" min-width="200"></el-table-column>
		<el-table-column label="项目成员" min-width="150" align="center">
			<template #default="scope">
			  <el-tag v-for="item in scope.row.user_names"  effect="dark" round style="margin-right: 3px;">{{ item.username }}</el-tag>
			</template>
		</el-table-column>
		<el-table-column label="创建人" prop="create_by_name"  min-width="80"/>
		<el-table-column label="更新人" prop="update_by_name"  min-width="80"/>
		<el-table-column label="创建时间" prop="create_time" sortable min-width="150"/>
		<el-table-column label="更新时间" prop="update_time" sortable min-width="150"/>
		<el-table-column align="center" min-width="180">
			<template #header>
				<el-button type='primary' @click="addProject">创建项目</el-button>
			</template>
			<template #default="scope" min-width='200px'>
			  <el-button v-if='scope.row.user.includes(user_id)' :icon="Pointer" size="small" type='primary' @click="enterProject(scope.row)">进入</el-button>
			  <el-button :icon="Edit" size="small" type='primary' @click="editProject(scope.row)" v-if="user_id === scope.row.create_by">编辑</el-button>
			  <el-button v-if="user_id === scope.row.create_by" @click="deleteProject(scope.row.id)" size="small" type="danger" :icon="Delete">删除</el-button>
			</template>
		</el-table-column>
	  </el-table>
	  <div style="margin: 10px">
	  	<el-pagination
	  	  v-model:current-page="page_size_params.page"
	  	  v-model:page-size="page_size_params.size"
	  	  :page-sizes="[10, 20, 30, 50]"
	  	  :small="small"
	  	  :disabled="disabled"
	  	  :background="background"
	  	  :hide-on-single-page="false"
	  	  layout="total, sizes, prev, pager, next, jumper"
	  	  :total="project_list.count"
	  	  @size-change="handleSizeChange"
	  	  @current-change="handleCurrentChange"
	  	/>
	  </div>
	</div>
</template>

<script>
import {mapState, mapActions, mapGetters} from 'vuex'
import { ElMessage, ElMessageBox } from 'element-plus'
import { View, Delete, Edit, Plus, EditPen, Pointer} from '@element-plus/icons-vue'

export default{
	computed:{
		...mapState(['user_id', 'projectInfo',  'user_name']),
	},
	data() {
		return {
			projectSearch:{
				user: '',
				name: '',
				desc: ''
			},
			page_size_params: {
				page: 1,
				size: 10,
			},
			count: 1,
			title: '新增用户',
			isAdd: true,
			editDialogVisible: false,
			project_list: [],
			ViewVisible: false,
			projectSave:{
				id: '',
				name: '',
				desc: '',
				user: [],
				url: '',
				user_names: [],
				create_by: '',
			},
			user_list: [],
		}
	},
	setup() {
		return {
			Edit,
			Delete,
			Plus,
			View,
			EditPen,
			Pointer,
		}
	},
	methods:{
		...mapActions(['getRolePermission']),
		handleCurrentChange(){
			this.getProjects()
		},
		handleSizeChange(){
			this.getProjects()
		},
		search(){
			this.getProjects()
		},
		reset(){
			for(let key in this.projectSearch){
				this.projectSearch[key] = ''
			}
		},
		enterProject(project_info){
			this.$store.commit('saveProjectInfo', project_info)
			this.$store.commit('addTags', {path: '/project/index', name: '项目首页'})
			this.$router.push({name: 'index'})
		},
		editProject(row_data){
			this.isAdd = false
			this.title = '编辑项目'
			this.getProject(row_data.id)
			this.editDialogVisible = true
		},
		addProject(){
			this.projectSave = {}
			this.projectSave.create_by = this.user_id
			this.projectSave.user = [this.user_id]
			this.title = '新增项目'
			this.editDialogVisible = true
			this.isAdd = true
			// this.getRoles()
		},
		save(){
			if (this.isAdd){
				this.createProject()
			}else{
				this.updateProject()
			}
		},
		async createProject(){
			const response = await this.$api.createProject(this.projectSave)
			if(response.status === 201){
				this.editDialogVisible = false
				this.getProjects()
			}
		},
		async updateProject(){
			const response = await this.$api.updateProject(this.projectSave.id, this.projectSave)
			if(response.status === 200){
				this.editDialogVisible = false
				this.getProjects()
			}
		},
		async deleteProject(id){
			ElMessageBox.confirm(
			    '项目删除后不可恢复，确定删除该项目吗?',
			    '提示',
			    {
			      confirmButtonText: '确认',
			      cancelButtonText: '取消',
			      type: 'warning',
			    }
			  )
			    .then(async() => {
				  const response = await this.$api.deleteProject(id)
				  if (response.status === 204){
					  this.getProjects()
					  ElMessage({
					    type: 'success',
					    message: '删除成功',
					  })
				  }
				  
			    })
			    .catch(() => {
					
			    })
		},
		async getProjects(){
			this.projectSearch.user = this.user_id
			const response = await this.$api.getProjects(Object.assign(this.projectSearch, this.page_size_params))
			if (response.status === 200){
				this.project_list = {...response.data}
			}
		},
		async getProject(id){
			const response = await this.$api.getProject(id)
			if (response.status === 200){
				this.projectSave = response.data.result
			}
		},
		async getUsers(){
			const response = await this.$api.getUsers()
			if (response.status === 200){
				this.user_list = response.data.results
			}
		},
	},
	created() {
		this.getProjects()
		this.getUsers()
	}
}
</script>

<style scoped>
	.project_list{
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.project_list .searchForm{
		width: 100%;
		flex: 1;
		background-color: white;
		padding: 15px 15px 0 15px;
		margin-bottom: 5px;
	}
	.project_list .el-form--inline .el-form-item{
		margin-bottom: 15px;
	}
	.project_list .table{
		background-color: white;
		flex: 1;
	}
	.searchForm .el-input{
		width: 150px;
	}
	.searchForm .el-select{
		width: 150px;
	}
	.dialog .el-input{
		width: 300px;
	}
	.dialog .el-select{
		width: 300px;
	}
	.form .el-select{
		width: 300px;
	}
	.el-button{
		width: 70px;
	}
	.el-icon{
		margin-left: 10px;
	}
	
</style>
